<template>
  <div class="order-return-bar">
    <div id="order-return-bar" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import orderReturnData from './data'

export default {
  name: 'OrderReturnBar',

  data() {
    return {

    }
  },

  mounted() {
    this.init()
  },

  methods: {
    init() {
      const barEchart = echarts.init(document.getElementById('order-return-bar'))
      const detaList = orderReturnData.map(item => item.data)
      const orderLisr = orderReturnData.map(item => item.order)
      const returnLisr = orderReturnData.map(item => item.returnNum)
      const option = {
        title: {
          text: '订单退单柱状图',
          textStyle: {
            color: '#96a4d0',
            fontWeight: 'normal',
            fontSize: 23
          }
        },
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: detaList
        },
        legend: {
          type: 'plain',
          bottom: 10
        },
        tooltip: {
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff'
          },
          borderWidth: 0,
          formatter: function(params) {
            return `${params.seriesName}<br/>${params.marker} ${params.name}: ${params.value}`
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#a7a9b2',
              width: 0.5
            }
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#ff0000'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '订单',
            data: orderLisr,
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#7d05e2' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#b000fc' // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#bc04e2' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          {
            name: '退单',
            data: returnLisr,
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#23c8fc' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#239efc' // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#2390fc' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ],
        animationEasing: 'elasticOut'
      }

      barEchart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.order-return-bar{
  width: 100%;
  height: 100%;
  #order-return-bar{
    width: 100%;
    height: 100%;
  }
}
</style>
